<template>
    <view class="page">
        <back :title="'修改信息'" :backSty="1" :isBg="false" :isBack="true"></back>
        <view class="title_box">
            <u-input v-model="title" :type="text" @input="inputBlur" placeholder="标题"
                :placeholder-style="placeholderSty" :clearable="false" />
        </view>
        <view class="upFile_box">
            <view class="shangchuan_box" v-if="file.length > 0">
                <view class="shacnhu_box" @click="delPic">

                </view>
                <image :src="file[0]" mode="scaleToFill" />
            </view>
            <view class="shangchuan_box" @click="titlePic" v-else>
                <u-icon name="plus" color="rgba(204, 204, 204, 1)" size="50"></u-icon>
            </view>
            <view>（选填）</view>
        </view>

        <view class="line_box"></view>
        <view class="wenbenkuang_box">
            <sp-editor :editorId="'editor-' + index" @input="inputOver" @upinImage="upinImage" @init="initEditor"
                @exportHtml="exportHtml" @addLink="addLink" :placeholder="'请输入您的具体内容'"></sp-editor>
        </view>
        <view class="shoujihao_box">
            <view class="left_box">
                <view class="left_phone_pic_box">
                    <image src="https://rubbish.lwjcg.com/static/index/dh.png" mode="scaleToFill" />
                </view>
                <view class="wenzi_box">
                    添加电话
                </view>
            </view>
            <view class="rt_box">
                <input type="number" @change="inputzBtn" v-model="phone"><u-icon color="rgba(199, 199, 199, 1)"
                    size="30" name="arrow-right"></u-icon>
            </view>
        </view>
        <view class="shoujihao_box" style="margin-bottom: 84rpx;" @click="addDress">
            <view class="left_box">
                <view class="left_phone_pic_box">
                    <image src="https://rubbish.lwjcg.com/static/index/dzicon.png" mode="scaleToFill" />
                </view>
                <view class="wenzi_box">
                    添加地址
                </view>
            </view>
            <view class="rt_box">
                <text style="margin-right: 12rpx;">
                    {{ dzObj.location || '' }}
                </text> <u-icon color="rgba(199, 199, 199, 1)" size="30" name="arrow-right"></u-icon>
            </view>
        </view>
        <view class="cz_box">
            <view class="shanchu_box" @click="del">
                <view class="tupian"></view>
                <view class="shanchu_box">删除</view>
            </view>
            <view class="fb_box" @click="addInit">重新发布</view>
        </view>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
    components: {
        back, empoy
    },
    data() {
        return {
            readOnly: false,
            title: '',//标题
            placeholderSty: {
                color: 'rgba(166, 166, 166, 1)',
                fontSize: '32rpx',
                fontWeight: '600'
            },
            file: [],//图片临时地址
            img_url: '',//大图
            contenHtml: '',//html模板
            dzObj: {
                location: '',
            },
            phone: '',
            isedit: false,
            phone: '',

        }
    },
    onLoad(options) {
        this.id = options.id
    },
    onShow() {
        this.detailShow()
        this.dzObj = this.$store.state.insterPep
        console.log('地址信息', this.dzObj)
    },
    methods: {
        detailShow() {
            let data = {
                id: this.id
            }
            this.$Request.post(this.$api.user.infomationDetail, data).then(res => {
                if (res.code == 200) {
                    this.contenHtml = res.data.content
                    this.title = res.data.title
                    this.file.push(res.data.full_img_url)
                    this.img_url = res.data.img_url
                    this.dzObj.location = res.data.address
                    this.phone = res.data.phone
                    // this.isedit = true
                }
            })
        },
        addDress() {
            // 地址
            uni.navigateTo({
                url: '/userPage/adress/modif'
            })
        },
        inputzBtn(e) {
            this.phone = e.detail.value
            console.log(this.phone)
        },
        inputBlur(e) {
            this.title = e
        },
        del() {

            uni.showModal({
                title: '确认删除？',
                content: '删除的内容无法恢复！',
                success: (res) => {
                    if (res.confirm) {
                        console.log('确认')
                        let data = {
                            id: this.id
                        }
                        this.$Request.post(this.$api.user.infomationDelete, data).then(res => {
                            if (res.code == 200) {
                                uni.showToast({
                                    title: res.msg,
                                    icon: 'none'
                                })
                                setTimeout(() => {
                                    uni.navigateBack({})
                                }, 500)
                            }
                        })
                    } else if (res.cancel) {
                        console.log('取消')
                    }

                }
            })

        },
        delPic() {
            let data = {
                img_url: this.img_url
            }
            this.$Request.post(this.$api.user.infomationRemove, data).then(res => {
                if (res.code == 200) {
                    uni.showToast({
                        title: '删除成功',
                        icon: 'none'
                    })
                    setTimeout(() => {
                        this.file.length = 0
                        this.img_url = ''
                    }, 500)

                }
            })
        },
        addInit() {
            console.log(this.contenHtml)
            if (this.title == '') {
                uni.showToast({
                    title: '请输入标题',
                    icon: 'none'
                })
            } else if (this.contenHtml == '') {
                uni.showToast({
                    title: '请输入内容',
                    icon: 'none'
                })
            } else if (this.phone == "") {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                })
            } else if (JSON.stringify(this.dzObj) == '{}') {
                uni.showToast({
                    title: '请选择地址',
                    icon: 'none'
                })
            } else {
                let data = {
                    title: this.title,
                    img_url: this.img_url,
                    content: this.contenHtml,
                    phone: this.phone,
                    lng: this.dzObj.lng,
                    lat: this.dzObj.lat,
                    address: this.dzObj.location,
                    id: this.id
                }
                this.$Request.post(this.$api.user.infomationEdit, data).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                        setTimeout(() => {
                            uni.navigateBack({})
                        }, 500)
                    }
                })
            }

        },
        titlePic() {
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], //从相册选择
                success: (res) => {
                    this.file.push(res.tempFilePaths[0])
                    var uploadurl = "https://build.lwjcg.com/api/infomation/upload?token=" + uni.getStorageSync("USERINFO")
                    uni.uploadFile({
                        url: uploadurl,
                        filePath: this.file[0],
                        name: 'img_url',
                        formData: {
                            'openid': uni.getStorageSync('openId')
                        },
                        success: (res) => {
                            let group = JSON.parse(res.data)
                            this.img_url = group.data
                            uni.showToast({
                                title: "上传成功",
                                icon: "success"
                            })
                        }
                    });
                }
            });
        },
        /**
         * 获取输入内容
         * @param {Object} e {html,text} 内容的html文本，和text文本
         * @param {Object} id 当前编辑器id
         */
        inputOver(e, id) {
            console.log('==== inputOver :', e, id)
            this.contenHtml = e.html
        },
        /**
         * 编辑器就绪
         * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
         * @param {String} id 编辑器id，在多富文本编辑器循环渲染时，可以通过id来作区分处理
         * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
         * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
         */
        initEditor(editor, id) {
            // if (this.isedit == true) {
                editor.setContents({
                    html: this.contenHtml
                })
            // }
            // switch (id) {
            //     case 'editor-0':
            //         // 初始化编辑器0内容
            //         editor.setContents({
            //             html: `<div>&nbsp;&nbsp;猫猫  <a href="http://www.baidu.com">百度</a></div>\n`
            //         })
            //         break
            //     case 'editor-1':
            //         // 初始化编辑器1内容
            //         this.isedit
            //         break
            //     case 'editor-2':
            //         // 初始化编辑器2内容
            //         editor.setContents({
            //             html: `<div>Hello Editor</div>\n`
            //         })
            //         break
            // }
        },
        /**
         * 直接运行示例工程插入图片无法正常显示的看这里
         * 因为插件默认采用云端存储图片的方式
         * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
         * @param {Object} tempFiles
         * @param {Object} editorCtx
         * @param {Object} id
         */
        upinImage(tempFiles, editorCtx, id) {
            console.log('==== upinImage :', tempFiles, editorCtx, id)
            /**
             * 本地临时插入图片预览
             * 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中
             * 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释
             * @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage
             */
            /**
             * 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传）
             * 正式开发环境中，请将上面 本地临时插入图片预览 注释后，模仿以下写法
             */
            tempFiles.forEach((item) => {
                var uploadurl = "https://build.lwjcg.com/api/infomation/upload?token=" + uni.getStorageSync("USERINFO") + '&flag=' + '1'
                uni.uploadFile({
                    url: uploadurl,
                    name: 'img_url',
                    filePath: item.tempFilePath,
                    cloudPath: `cloudstorage/${item.name}`,
                    cloudPathAsRealPath: true,
                    success: (res) => {
                        var group = JSON.parse(res.data)
                        editorCtx.insertImage({
                            src: group.data,
                            width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
                            success: function () {
                            }
                        })
                    }
                })

            })


        },
        /**
         * 导出
         * @param {string} e 导出的html内容
         * @param {string} id 当前编辑器id
         */
        exportHtml(e, id) {
            console.log('==== exportHtml :', e, id)
            uni.navigateTo({
                url: '/pages/out/out',
                success(res) {
                    res.eventChannel.emit('e-transmit-html', {
                        data: e
                    })
                }
            })
        },
        /**
         * 添加超链接
         * @param {Object} e { text: '链接描述', href: '链接地址' }
         * @param {string} id 当前编辑器id
         */
        addLink(e, id) {
            console.log('==== addLink :', e, id)
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 1);

    .upFile_box {
        width: 100%;
        height: 166rpx;
        margin-top: 20rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 44rpx;

        .shangchuan_box {
            width: 164rpx;
            height: 164rpx;
            border-radius: 18rpx;
            background: rgba(245, 245, 245, 1);
            text-align: center;
            line-height: 170rpx;
            margin-right: 20rpx;
            position: relative;

            .shacnhu_box {
                position: absolute;
                width: 38rpx;
                height: 38rpx;
                top: -10rpx;
                right: -5rpx;
                background-image: url('https://rubbish.lwjcg.com/static/index/del.png');
                background-size: 100% 100%;

            }

            image {
                width: 100%;
                height: 100%;
                border-radius: 18rpx;
            }
        }
    }

    .title_box {
        width: 100%;
        height: 70rpx;
        margin-top: 20rpx;
        box-sizing: border-box;
        padding: 0 30rpx;

        /deep/ .u-input__input {
            color: rgba(34, 34, 34, 0.9) !important;
            font-size: 32rpx;
            font-weight: 700;
        }
    }

    .line_box {
        width: 100%;
        height: 2rpx;
        background-color: rgba(245, 245, 245, 1);
    }

    .wenbenkuang_box {
        width: 100%;
        height: 700rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        border-bottom: 2rpx solid rgba(245, 245, 245, 1);
        // margin-bottom: 26rpx;

        .editor-box {
            height: 700rpx;
        }
    }

    .shoujihao_box {
        width: 100%;
        height: 90rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 32rpx;
        border-bottom: 2rpx solid rgba(245, 245, 245, 1);

        .left_box {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .left_phone_pic_box {
                width: 26rpx;
                height: 32rpx;
                opacity: 1;
                margin-right: 10rpx;

                image {
                    width: 100%;
                    height: 100%;
                }

            }

            .wenzi_box {
                height: 40rpx;
                /** 文本1 */
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: rgba(99, 98, 98, 1);
            }
        }

        .rt_box {
            width: 500rpx;
            height: 45rpx;
            text-align: right;
            font-size: 28rpx;
            font-weight: 500;
            letter-spacing: 0rpx;
            line-height: 45rpx;
            color: rgba(0, 0, 0, 1);
            display: flex;
            justify-content: flex-end;
            align-items: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            input {
                text-align: right;
                font-size: 28rpx;
                font-weight: 500;
                letter-spacing: 0rpx;
                line-height: 45rpx;
                color: rgba(0, 0, 0, 1);
                margin-right: 12rpx;
            }

        }


    }

    .cz_box {
        width: 100%;
        height: 90rpx;
        box-sizing: border-box;
        padding: 0 50rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .shanchu_box {
            width: 60rpx;
            height: 88rpx;
            margin-top: 10rpx;

            .tupian {
                width: 32rpx;
                height: 34rpx;
                opacity: 1;
                margin: auto;
                background-image: url('https://rubbish.lwjcg.com/static/index/scicon.png');
                background-size: 100% 100%;
                margin-bottom: 6rpx;

            }

            .shanchu_box {
                width: 60rpx;
                height: 40rpx;
                font-size: 28rpx;
                font-weight: 500;
                letter-spacing: 2rpx;
                line-height: 40rpx;
                color: rgba(128, 128, 128, 1);

            }
        }

        .fb_box {
            width: 560rpx;
            height: 100rpx;
            opacity: 1;
            border-radius: 16rpx;
            background: rgba(26, 194, 121, 1);
            font-size: 32rpx;
            font-weight: 400;
            line-height: 100rpx;
            color: rgba(255, 255, 255, 1);
            text-align: center;
        }
    }
}
</style>